<template>
<div>
	<Card  dis-hover>
		<p slot="title">留言管理</p>
		<div pd2>
			<p>
				<Button size="small" mgl1 @click="handleDeleteBatch">批量删除</Button>
				<Button size="small" mgl1 @click="handleShowAuditModal">批量审核</Button>
			</p>
			<AutoTable :ref="tableRef" action="/api/services/app/Feedback/Search" :columns="columns" :query="query" :buttons="buttons" mgt1></AutoTable>
		</div>
	</Card>

	<Modal v-model="showModal" title="编辑留言" :mask-closable="false">
		<Form :ref="formRef" :model="model" :label-width="100">
			<FormItem label="名字" prop="name">
				<div>{{model.name}}</div>
			</FormItem>
			<FormItem label="联系电话" prop="phoneNumber">
				<div>{{model.phoneNumber}}</div>
			</FormItem>
			<FormItem label="邮箱地址" prop="emailAddress">
				<div>{{model.emailAddress}}</div>
			</FormItem>
			<FormItem label="留言内容" prop="content">
				<div>{{model.content}}</div>
			</FormItem>
			<FormItem label="管理员回复" prop="reply">
				<Input v-model="model.reply" type="textarea" :rows=3 />
			</FormItem>
			<FormItem label="审核状态" prop="status">
				<RadioGroup v-model="model.status">
					<Radio :label="1">审核通过</Radio>
					<Radio :label="2">审核不通过</Radio>
				</RadioGroup>
			</FormItem>
		</Form>
		
        <div slot="footer">
            <Button type="primary" @click="handleSave">保存</Button>
            <Button @click="showModal=false">取消</Button>
        </div>
	</Modal>

	<Modal v-model="showAuditModal" title="留言审核" :mask-closable="false">
		<RadioGroup v-model="auditStatus">
			<Radio :label="1">审核通过</Radio>
			<Radio :label="2">审核不通过</Radio>
		</RadioGroup>
		
        <div slot="footer">
            <Button type="primary" @click="handleAuditBatch">确定</Button>
            <Button @click="showAuditModal=false">取消</Button>
        </div>
	</Modal>
</div>
</template>

<script lang="ts">
;import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase';
import AutoTable from "@common/components/AutoTable.vue";

@Component({
	components:{ AutoTable }
})
export default class FeedbackManager extends AbpBase {
	showModal:boolean=false;
	showAuditModal:boolean=false;
	auditStatus:Number = 0;
	tableRef:string = this.getRandomRef('table')
	formRef:string = this.getRandomRef('feedback')
	model:any = this.getDefaultModel()
	getDefaultModel() {
		return {
			name: '',
			content: '',
			emailAddress: '',
			phoneNumber: '',
			reply: '',
			status: 0
		}
	}
	get buttons() {
		return ['search','search_all']
	}
	get query() {
		return { // 查询条件
			searchTarget: { type: "select", default: "name", options: [
					{ value: "name", label: "名字" },
					{ value: "content", label: "留言内容" },
					{ value: "phoneNumber", label: "联系电话" },
					{ value: "emailAddress", label: "邮箱地址" }
			] },
			search: { type: "input", label: "", placeholder: "关键字" },
			feedbackStatus: { type: "select", label: "审核状态:", default: -1, placeholder: "未选择", options: [
					{ value: -1, label: "所有" },
					{ value: 0, label: "待审核" },
					{ value: 1, label: "审核通过" },
					{ value: 2, label: "审核失败" }
			] },
			replyStatus: { type: "select", label: "回复状态:", default: -1, placeholder: "未选择", options: [
					{ value: -1, label: "所有" },
					{ value: 0, label: "未回复" },
					{ value: 1, label: "已回复" }
			] },
			beginTime: { type: "date", placeholder: "开始时间" },
			endTime: { type: "date", placeholder: "结束时间", handleValue: value => {
				if(value) {
					var date = new Date(value);
					date.setDate(date.getDate() + 1);
					value = date.toLocaleString();
				}
				return value;
			} },
		};
	}
	get columns() {
		return [
			{
				type: 'selection', width: 50, align: 'center'
			},
			{
				title: '名字', align: 'center', key: 'name'
			},
			{
				title: '联系电话', align: 'center', key: 'phoneNumber'
			},
			{
				title: '邮箱地址', align: 'center', key: 'emailAddress'
			},
			{
				title: '留言内容', align: 'center', render: (h, params) => {
					return h('div', this.ellipsis(params.row.content, 20));
				}
			},
			{
				title: '留言时间', align: 'center', render: (h, params) => {
					return h('div', this.formatTimeStr(params.row.creationTime));
				}
			},
			{
				title: '状态', align: 'center', width: 100, render: (h, params) => {
					return h('div', ['待审核', '审核通过', '审核失败'][params.row.status]);
				}
			},
			{
				title: '操作', key: 'action', align: 'center', width: 120, render: (h, params) => {
					return h('div', [
						h('Button', {
							props: { type: 'primary', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleShowCreateModal(params.row)
							} }
						}, '编辑'),
						h('Button', {
							props: { type: 'error', size: 'small' },
							style: { marginRight: '5px' },
							on: { click: () => {
								this.handleDelete(params.row.id);
							} }
						}, '删除')
					]);
				}
			}
		]
	}
	handleDelete(id:Number) {
		this.confirm('确认删除该留言吗？', async () => {
			var response = await this.post('Feedback/Delete', { id: id });
			if(response.success) {
				this.getpage();
			}
		});
	}
	async handleDeleteBatch() {
		(this.$refs[this.tableRef] as any).handleBatch(async (selectedItems) => {
			this.confirm(`确认要删除选中的${selectedItems.length}条留言吗`, async () => {
				var ids = selectedItems.map(elem => elem.id);
				var response = await this.post('Feedback/Delete', { ids: ids });
				if(response.success) {
					this.getpage();
				}
			});
		});
	}
	handleShowAuditModal() {
		(this.$refs[this.tableRef] as any).handleBatch(async (selectedItems) => {
			this.showAuditModal = true;
		});
	}
	async handleAuditBatch() {
		(this.$refs[this.tableRef] as any).handleBatch(async (selectedItems) => {
			if(this.auditStatus == 0) {
				this.error('请选择审核状态');
			}else if(this.auditStatus == 1) {
				this.confirm(`确认要批量审核通过选中的${selectedItems.length}条留言吗`, async () => {
					var ids = selectedItems.map(elem => elem.id);
					var response = await this.post('Feedback/Audited', { ids: ids });
					if(response.success) {
						this.getpage();
						this.showAuditModal = false;
					}
				});
			}else if(this.auditStatus == 2) {
				this.confirm(`确认要批量审核不通过选中的${selectedItems.length}条留言吗`, async () => {
					var ids = selectedItems.map(elem => elem.id);
					var response = await this.post('Feedback/AuditFailed', { ids: ids });
					if(response.success) {
						this.getpage();
						this.showAuditModal = false;
					}
				});
			}
		});
	}
	handleShowCreateModal(item) {
		this.model = Object.assign({}, item);
		this.showModal = true;
	}
	handleSave() {
		(this.$refs[this.formRef] as any).validate(async () => {
			var response = await this.put('Feedback/Update', this.model);
			if(response.success) {
				this.showModal = false;
				this.getpage();
			}
		});
	}
	getpage() {
		(this.$refs[this.tableRef] as any).getData();
	}
}
</script>